import {Row,Col,Form,Input,Button,Typography,  Select } from "antd" 
import React from 'react'
import { UserOutlined, LockOutlined,PhoneOutlined } from '@ant-design/icons';
import { reg } from "../../utils/validate";
import { roleList, toast } from "../../utils/commom";
import myinfo from "../../mobx/info";
import { ajax } from "../../api";

// ceshi

const {Title} = Typography
export default function Addstudent({history}:any) {
    const [form] = Form.useForm()
    const {userInfo} = myinfo
    const onFinish =async (v:any)=>{
      let {code,result}:any =await ajax.register(v)
      if(code==200){
          history.push('/main/student/list')
      }
    }
    const onFinishFailed = ()=>{
        toast.error('请填写有效的用户信息')
    }

    const resetData = ()=>{
        form.resetFields()
    }
    return (
        <div>
            <Title level={4}>添加用户</Title>
            <Row>
                <Col>
                    <Form
                      name="basic"
                      labelCol={{ span: 24 }}
                      wrapperCol={{ span: 24 }}
                      initialValues={{password:"qwe123"}}
                      onFinish={onFinish}
                      onFinishFailed={onFinishFailed}
                      autoComplete="off"
                      form={form}
                    >
                         <Form.Item
                                label="用户名称"
                                name="username"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input  prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                            </Form.Item>

                            <Form.Item
                                label="手机号"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号!' },
                            {pattern:reg.phone,  message:'请输入正确的手机号码'}]}
                            >
                                <Input  prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                            </Form.Item>

                            <Form.Item
                                label="登录密码"
                                name="password"
                                rules={[{ required: true, message: '"请输入6-16位的数字加字母组合"!' }]}
                            >
                                <Input disabled  prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                            </Form.Item>

                            <Form.Item
                                label="用户身份"
                                name="role"
                                rules={[
                                    { required: true, message: '请选择角色!' }
                                ]}
                            >
                               <Select placeholder="请选择用户身份" >
                                {
                                    roleList.map((l,i)=>(
                                        <Select.Option disabled={l.value==4 } value={l.value} key={i}>
                                                {l.text}
                                        </Select.Option>
                                    ))
                                }
                               </Select>
                            </Form.Item>
                            <Form.Item>
                                <Row>
                            <Col span={11} >
                                        <Button type="primary" block htmlType="submit"  > 添加用户</Button>
                                    </Col>
                                    <Col span={11} offset={2}>
                                        <Button type="default" block danger  onClick={resetData} > 重置 </Button>
                                    </Col>
                                    </Row>
                            </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}
